import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList, AtListItem, AtAccordion, AtSwipeAction, AtCurtain} from 'taro-ui'
import './courseDetail.scss'
import reactMixin  from 'react-mixin'
import myJs from './courseDetailJs.js'
import app from '../../../main';

export default class CourseDetail extends Component {
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    config = {
        navigationBarTitleText: '病程详情'
    }

    init() {
        this.setState({
            isOpenImage: false,
            image: ''
        });
        this.getCourse();
    }

    showImage(image, images) {
        var urls = [];
        for (var i = 0; i < images.length; i++) {
            urls.push(images[i].value);
        }

        app.prviewImage(image, urls);
    }

    closeImage() {
        this.setState({
            isOpenImage: false
        })
    }

    render () {
        return (
            <View className='courseDetail'>
                <AtCurtain
                    isOpened={this.state.isOpenImage}
                    onClose={this.closeImage.bind(this)}
                >
                    <Image
                    style='width:100%;'
                    src={app.getPath(this.state.image)}
                    />
                </AtCurtain>
                <View className="title">{this.state.case_course.name}</View>
                <View className='simple pd'>
                    <View className='label'>就诊日期</View>
                    <View className='value'>{this.state.case_course.visit_at}</View>
                </View>
                {
                    this.state.course_items.map((item) => {
                        return (item.type == '多选题' || item.type == '填空题' || item.type == '单选题') ?
                            (
                                <View className='simple pd'>
                                    <View className='label'>{item.label}：</View>
                                    <View className='value'>{item.answer}</View>
                                </View>
                            ) : 
                            (item.type == '矩阵填空题' ? 
                            (
                                <View className='pd'>
                                    <View className='label'>{item.label}：</View>
                                    <View className='multiple'>
                                        {
                                            item.answer.map((one) => {
                                                return <View className='mp_item'>
                                                            <View className='label'>{one.label}</View>
                                                            <View className='value'>{one.value}</View>
                                                        </View>
                                            })
                                        }
                                    </View>
                                </View>
                            ) : 
                            (item.type == '矩阵单选题' ? 
                            (
                                <View className='pd'>
                                    <View className='label mg'>{item.label}：</View>
                                    {
                                        item.answer.map((one) => {
                                            return <View className='row'>
                                                        {
                                                            one.map((i) => {
                                                                return <View className='col'>{i}</View>
                                                            })
                                                        }
                                                    </View>
                                        })
                                    }
                                </View>
                            ) : 
                            (item.type == '眼科检查' ? 
                            (
                                <View className='pd'>
                                    <View className='label mg'>{item.label}：</View>
                                    <View className='eye'>
                                        <View className='eye1'>项目</View>
                                        <View className='eye2'>左眼</View>
                                        <View className='eye3'>右眼</View>
                                    </View>
                                    {
                                        item.answer.map((one) => {
                                            return <View className='eye_item'>
                                                        <View className='eye_value1'>{one[0]}</View>
                                                        <View className='eye_value2'>{one[1]}</View>
                                                        <View className='eye_value3'>{one[2]}</View>
                                                    </View>
                                        })
                                    }
                                </View>
                            ) : 
                            (item.type == '上传图片' ? 
                            (
                                <View className='pd'>
                                    <View className='label mg'>{item.label}：</View>
                                    {
                                        ((item.is_privacy && this.state.case_course.is_allow_privacy) || !item.is_privacy) &&
                                        <View className="images">
                                        {
                                            item.answer.map((one) => {
                                                return <View className='item_box'>
                                                            <View className='item_img'><Image src={one.value} onClick={this.showImage.bind(this, one.value, item.answer)} style='width:200rpx;height:200rpx;' mode='widthFix'></Image></View>
                                                            <View className='item_txt'>{one.label}</View>
                                                        </View>
                                            })
                                        }
                                        </View>
                                    }
                                    
                                </View>
                            ): (
                                null
                            )))))
                    })
                }
                
            </View>
        );
    }
}

reactMixin.onClass(CourseDetail, myJs);
